<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">

</head>
<body>
   <div id="job">
       <div class="toolbar" style="float: right">
<!--           <input type="text" id="selEmpp" placeholder="请输入名字">-->
<!--           <input type="text" id="addJob" placeholder="请输入职位">-->
<!--           <button class="btn btn-primary" @click="selEmpp()">查询</button>-->
           <button class="btn btn-success" onclick="location.href='addJob.html'">添加</button>
           <button class="btn btn-danger" id="del-btn" @click="delJobAll()">批量删除</button>
       </div>
       <table class="table table-hover"   style="text-align: center;line-height: 38px">
           <thead>
           <tr>
               <th><input type="checkbox" @click="allCheck" id="checkAll"/></th>
               <th>Id</th>
               <th>职位名称</th>
               <th>菜单权限</th>
           </tr>
           </thead>
           <tbody>
           <tr v-for="j in list">
               <td><input class="check" @click="isCheckAll" type="checkbox" :value="j.jobId" ></td>
               <td>{{j.jobId}}</td>
               <td>{{j.jobTitle}}</td>
               <td><button type="button" class="btn btn-primary" @click="openUpd(j)">修改权限</button></td>
           </tr>
           </tbody>
       </table>
       <div class="modal fade" id="myModal">
           <div class="modal-dialog">
               <div class="modal-content">
                   <!-- 模态框头部 -->
                   <div class="modal-header">
                       <h4 class="modal-title">修改权限窗口</h4>
                       <button type="button"   class="close" data-dismiss="modal">&times;</button>
                   </div>

                   <!-- 模态框主体 -->
                   <div class="modal-body" id="app-div">
                       <!--                       树形结构-->
                       <div class="content_wrap">
                           <ul id="treeDemo" class="ztree"></ul>
                           <form >
                               <input type="text" name="jobId"  step="0.01" style="display: none" v-model="job.jobId" class="form-control"
                               >
                           </form>
                       </div>
                       <!-- 模态框底部 -->
                       <div class="modal-footer">
                           <button type="button" class="btn btn-secondary" style="margin-right:150px "
                                   @click="btn_sub(job.jobId)">提交</button>
                       </div>
                   </div>
               </div>
           </div>
       </div>
   </div>

   <script type="text/javascript" src="../bootstrap/vue.js"></script>
   <script type="text/javascript" src="../bootstrap/jquery3.6.js"></script>
   <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
   <script type="text/javascript" src="../bootstrap/my.js"></script>
   <script type="text/javascript" src="../zTree_v3/js/jquery.ztree.all.js"></script>
   <script>
        $.ajax({
            type:"post",
            url:"../Job/selJobAll",
            dataType:"json",
            success:function(data){
                let jobList=new Vue({
                    el: '#job',
                    data: {
                       list:data.list,
                        job:{}
                    },
                    methods:{
                      openUpd:function (j){
                          $('#myModal').modal('show');
                          this.job = j;
                          var jobId=j.jobId;
                          //查询菜单列表
                          function selMenu(){
                              let zNodes;
                              $.ajax({
                                  type:"post",
                                  url:"../Menu/selMenuById",
                                  data:{"jobId":jobId},
                                  async:false,
                                  dataType:"json",
                                  success:function (json){
                                      zNodes=json.list;
                                  }
                              })
                              return zNodes;
                          }
                          $(function (){
                              $.fn.zTree.init($("#treeDemo"), setting, selMenu());
                          })
                          var setting = {
                              check: {
                                  enable: true,
                                  chkboxType:{"Y":"ps","N":"ps"}
                              },
                              data: {
                                  simpleData: {
                                      enable: true,
                                      idKey:"menuId",
                                      pIdKey:"menuPid",
                                      rootPid:0
                                  },
                                  key:{
                                      name:"menuName",
                                  },
                              }
                          };



                      },
                        btn_sub:function (jobId){
                            fun_getCheckValue(jobId)
                        }
                       ,
                        allCheck: function () {
                            eventHub.$emit("allCheck",null);
                        },

                        isCheckAll: function () {
                            eventHub.$emit("isCheckAll",null);
                        },

                        delJobAll:function (){
                            let ids = "";
                            // 获取复选框中的值 id值 使用类选择器each()遍历方法
                            $(".check").each(function () {
                                // 对所有符合该选择器的元素进行操作。 this 复选框.value
                                // 判断该复选框是否选中
                                if (this.checked) {
                                    ids += this.value + ",";
                                }
                            })
                            if(ids=="") return ;
                            // ajax把拼接的id传入到后台
                                $.ajax({
                                    type: "post",
                                    url: "../Job/delJobAll",
                                    data: {ids: ids},
                                    dataType: "json",
                                    success: function (data) {
                                        // 删除完成后重新查询第一页
                                        alert(data.message)
                                        location.reload();
                                        eventHub.$emit("closeCheckAll",null);
                                    }
                                });
                        }
                    }
                })
            }
        })

        function  fun_getCheckValue(jobId){
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            var nodes=zTree.getCheckedNodes(true);
            var result='';
            if(nodes.length==0){
                alert("请选择职位！！");
                return false;
            }
            for (var i = 0; i < nodes.length; i++) {
                var halfCheck = nodes[i].getCheckStatus();
                if (!halfCheck.half){
                    result += nodes[i].menuId +',';
                }

            }
            result=result.substring(0,result.lastIndexOf(","));
            //修改权限
            $.ajax({
                type:"post",
                url:"../Menu/updMenu",
                data: {
                    "result":result,
                    "jobId":jobId,
                },
                dataType: "json",
                success:function (json){
                    if (json.message == "修改成功") {
                        location.href = "job_list.html";
                    }
                }
            })
        }
    </script>
</body>
</html>